<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>就诊人管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/common.css">
    <style>
        .bg {
            height: 130px;
            width: 100%;
            background-color: rgb(64, 176, 224);
            position: absolute;
            top: 0;
            z-index: -1;
        }

        .header {
            background-color: rgb(170, 223, 246);
            border-radius: 10px;
            height: 130px;
            top: 20px;
        }

        .headimg {
            border-radius: 50%;
            display: inline-block;
        }

        .wrap {
            height: 100px;
            background-color: white;
            border-radius: 10px;
        }

        p {
            margin-bottom: 0;
        }

        .badge {
            display: none;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="container mb-5">
        <div class="patient-list">
            <div class="header mt-4 py-4 px-3 d-flex justify-content-start align-items-center">
                <div> <img class="headimg" src="./images/manimg.png" width="70px" height="70" alt=""></div>
                <div class="ms-3">
                    <h5 style="font-weight:bold; color: blue;">李若凡</h5>
                    <p>身份证号:</p>
                    <p>9190909222228383</p>
                </div>
                <div class="ms-3">
                    <h5><span class="badge rounded-pill bg-danger">删除</span></h5>
                </div>
            </div>
        </div>
        <div class="wrap mt-3 d-flex justify-content-around align-items-center">
            <img class="headimg" src="./images/manimg.png" width="60px" height="60" alt="">
            <h3 class="patient p-1" style="color: black;">添加就诊人</h3>
            <a href="./addpatient.html">
                <button type="button" class="btn" style="background-color: rgb(131, 197, 235);">立即添加</button>
            </a>
        </div>
        <div class="ms-3 mt-4">
            <p style="color: orange;">温馨提示</p>
            <p>1.您最多可以添加五个就诊人。</p>
            <p>2.新生儿用户不能添加就诊人。</p>
        </div>
        <div class="mb-5">
            <button type="button" class="btn btn-primary mt-4 update" style="width: 100%;">编辑</button>
        </div>
    </div>
    <script>
        select();
        $('.update').click(function () {
            $('.badge').fadeToggle()
        })
        // 删除
        $('.patient-list').on('click', 'span:contains(删除)', function () {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/patient/del',
                data:
                    { id: $(this)[0].getAttribute('idx') },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        })
        // 查找所有就诊人信息
        function select() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/patient/select',
                success: function (data) {
                    console.log(data)
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                str += ` 
            <div class="header mt-4 py-4 px-3 d-flex justify-content-start align-items-center">
                <div> <img class="headimg" src="./images/manimg.png" width="70px" height="70" alt=""></div>
                <div class="ms-3">
                    <h5 style="font-weight:bold; color: blue;">${item.name}</h5>
                    <p>身份证号:</p>
                    <p>${item.idcard}</p>
                </div>
                <div class="ms-3">
                    <h5><span class="badge rounded-pill bg-danger" idx=${item.id}>删除</span></h5>
                </div>
            </div>`;
            })
            $('.patient-list').html(str)
        }
    </script>
</body>

</html>